<template>
  <div v-if="!isFromM7" class="c-mb10 c-bg-white c-w100 c-pv20 c-ph24 c-flex-row  c-aligni-center">
    <div class="c-ww100 c-hh100 c-text-hidden c-brp50">
      <img v-lazy="item.avatar" alt="" @error="setDefultImg" class="imgCloseBig" />
    </div>
    <div class="c-w0 c-flex-grow1 c-pl20 c-flex-column c-hh120 c-justify-sb">
      <div class="c-fs24 c-fc-xblack c-text-ellipsis1 c-pt5">{{item.name}}</div>
      <div class="c-fs20 c-fc-gray c-flex-row c-aligni-center c-pb5">
        <span class="c-w0 c-flex-grow1 c-text-ellipsis1 c-pr40">{{item.intro}}</span>
        <span class="theme-fc" v-if="visible.dataVisible&&isShowPeopleNumber==1">{{item.number}}</span>
        <span class="c-pl10" v-if="visible.dataVisible&&isShowPeopleNumber==1">群成员</span>

      </div>
    </div>
  </div>

  <div class="c-w100 c-ph24 c-pv24" :style="getVerticalSpacing(marginSettings) + getHorizontalSpacing(marginSettings)" v-else>
    <div class="c-flex-row c-bg-sgray c-text-hidden c-ph24"
      :style="getInnerSpacing(marginSettings, 1, itemList.length -1) + getBorderRadius(borderRadius, '0.4rem')"
      :class="index != itemList.length -1 ? 'c-mb40' : ''"
      v-for="(item,index) in itemList" :key="index" @click="clickSocailGroupItem(item.socialRoomId)" v-if="itemType == 1 && index <showCount"
    >
      <div class="c-text-hidden c-p c-flex-shrink0 c-pv24" :class="coverStyleType == 2 ? 'c-ww120' : 'c-ww100'">
        <img class="c-w100 " :class="coverStyleType == 2 ? 'c-hh120 c-br16' : 'c-hh100 c-brp50'" :src="$addXossFilter(item.avatar, require('../../assets/examination_defult.png'))" @error="item.avatar = require('../../assets/examination_defult.png')" alt="" />
      </div>
      <div class="c-flex-row c-justify-sb c-aligni-center c-pv24 c-ml20 c-w0 c-flex-grow1 c-bg-sgray">
        <div class="c-flex-column c-w0 c-flex-grow1 c-hh100" :class="visible.dataVisible&&isShowPeopleNumber==1 ? 'c-justify-sb' : 'c-justify-center'">
          <div class="c-fs24 c-lh36 c-text-ellipsis2 c-fc-xblack c-fw-b">{{item.name}}</div>
          <div class="c-fs18 c-fc-gray" v-if="visible.dataVisible&&isShowPeopleNumber==1">{{item.number}}人已加入</div>
        </div>
        <div class="c-fs22 c-fc-white c-br25 c-ww110 c-hh44 c-flex-center c-flex-row theme-bg">
          加入
        </div>
      </div>
    </div>
    <div class="c-w100" v-if="itemType == 2">
      <div class="c-w100 c-contexty-hidden c-contextX-scroll c-ws-n">
        <template v-if="coverStyleType == 2">
          <div class="c-inlineblack c-vcAlign-top c-ww240 c-bd1 c-text-hidden c-mr20 c-bg-white c-pb18"
            :style="getInnerSpacing(marginSettings, 2) + getBorderRadius(borderRadius, '0.4rem')"
            v-for="(item,index) in itemList" v-if="index <showCount" :key="index" @click="clickSocailGroupItem(item.socialRoomId)">
            <div class="c-ww240 c-maxh240 c-text-hidden">
              <img class="c-w100 c-block" :src="$addXossFilter(item.avatar, require('../../assets/examination_defult.png'))" @error="item.avatar = require('../../assets/examination_defult.png')" alt="" />
            </div>
            <div class="c-fs24 c-lh36 c-text-ellipsis1 c-textAlign-c c-ws-bs c-fc-xblack c-mt16 c-ph10 c-fw-b">{{item.name}}</div>
            <div class="c-fs18 c-fc-gray c-mt10 c-ph10 c-textAlign-c c-m-0auto" v-if="visible.dataVisible&&isShowPeopleNumber==1">{{item.number}}人已加入</div>
            <div class="c-fs22 c-mt18 c-fc-white c-br25 c-ww110 c-hh44 c-flex-center c-flex-row theme-bg c-m-0auto">加入</div>
          </div>
        </template>
        <template v-else>
          <div class="c-inlineblack c-vcAlign-top c-ww180 c-bd1 c-pv18 c-text-hidden c-bg-white"
            :class="index == itemList.length - 1 ? '':' c-mr20'"
            :style="getInnerSpacing(marginSettings, 2) + getBorderRadius(borderRadius, '0.4rem')"
            v-for="(item,index) in itemList" v-if="index <showCount" :key="index" @click="clickSocailGroupItem(item.socialRoomId)">
            <div class="c-ww100 c-maxh150 c-mlr-auto">
              <img class="c-ww100 c-hh100 c-brp50 c-block" :src="$addXossFilter(item.avatar, require('../../assets/examination_defult.png'))" @error="item.avatar = require('../../assets/examination_defult.png')" alt="" />
            </div>
            <div class="c-fs24 c-lh36 c-text-ellipsis1 c-textAlign-c c-fc-xblack c-mt16 c-ww160 c-ph10 c-fw-b">{{item.name}}</div>
            <div class="c-fs18 c-fc-gray c-mt10 c-textAlign-c" v-if="visible.dataVisible&&isShowPeopleNumber==1">{{item.number}}人已加入</div>
            <div class="c-fs22 c-mt18 c-fc-white c-br25 c-ww110 c-hh44 c-flex-center c-flex-row theme-bg c-mlr-auto">加入</div>
          </div>
        </template>
      </div>
    </div>

    <div class="c-w100 c-ph24" v-if="itemType == 3">
      <div class="c-flex-row c-flexw-wrap c-justify-sb">
        <div class="c-flex-column c-aligni-center c-ww190 c-pv24" v-for="(item,index) in itemList" v-if="index <showCount" :key="index" @click="clickSocailGroupItem(item.socialRoomId)">
          <div class="c-ww100 c-maxh150">
            <img class="c-ww100 c-hh100 c-brp50 c-block" :src="$addXossFilter(item.avatar, require('../../assets/examination_defult.png'))" @error="item.avatar = require('../../assets/examination_defult.png')" alt="" />
          </div>
          <div class="c-fs24 c-lh36 c-text-ellipsis2 c-textAlign-c c-fc-xblack c-mt16 c-fw-b">{{item.name}}</div>
          <div class="c-fs18 c-fc-gray c-mt10" v-if="visible.dataVisible&&isShowPeopleNumber==1">{{item.number}}人已经入</div>
          <div class="c-fs22 c-mt18 c-fc-white c-br25 c-ww110 c-hh44 c-flex-center c-flex-row theme-bg">
            加入
          </div>
        </div>

      </div>
    </div>
    <div v-if="showMore && itemType != 2" class="c-fs20 c-textAlign-c c-pt24 c-flex-row c-flex-center" @click="clickMore">
      <div class="c-ph20 c-pv8 theme-fc theme-bg-10 c-br50" :style="getMoreColor(headLine) + getHeadLineMore(headLine)">查看更多</div>
    </div>
  </div>
</template>
<script>
import defultImg from '../../assets/defult_head.png'
import { utilJs } from "@/utils/common.js"
import { customStyle } from '@/utils/customStyle.js'
export default {
  name: "SocialGroupItem",
  mixins: [customStyle],
  props: {
    item: {
      type: Object,
      default: null,
    },
    isFromM7: {
      type: Boolean,
      default: false
    },
    itemType: {
      type: Number,
      default: 1, //1一行一列，2一行两列，3一行三列
    },
    itemList: {
      type: Array,
      default: () => []
    },
    isShowPeopleNumber: {
      type: Number,
      default: 1,
    },
    showCount: {
      type: Number,
      default: 1
    },
    showMore: {
      type: Boolean,
      default: false
    },
    coverStyleType: {
      type: Number,
      default: 1
    },
    visible:{
      type: Object,
      default: () => {
        return {
          priceVisible:true, // 价格、商品价格
          originalPriceVisible:true, // 划线价格
          dataVisible:true, // 商品数据、数据字段、数据
          statusVisible:true, // 状态
          forecastVisible:true, // 预告时间
          qrVisible:true, // 预告二维码
          vipVisible:true, // vip角标
        }
      },
    },
    headLine: {
      type: Object,
      default: null
    },
    marginSettings: {
      type: Object,
      default: null
    },
    pageName: {//首页INDEX 预览页PREVIEW_INDEX 微页面MICRO_PAGE
      type: String,
      default: "INDEX"
    },
    borderRadius: {
      type: Object,
      default: null
    },
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      pageTextColor: sessionStorage.getItem('pageTextColor') || ''
    };
  },
  methods: {
    clickMore() {
      this.$emit('clickMore');
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    clickSocailGroupItem(socailGroupNo) {
      if (this.pageName == 'PREVIEW_INDEX') {
        return;
      }
      let toPath = `/homePage/socialGroup/socialGroupInfo?SocialRoomId=${socailGroupNo}`;
      this.iosAppRouteChange(toPath);
    },
    //设置默认头像
    setDefultImg(e) {
      this.item.avatar = defultImg;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.c-ww110 {
  width: 2.75rem;
}
.c-hh44 {
  height: 1.1rem;
}
</style>
